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These tutorials are designed to get you through the basics of making web sites 
in Dreamweaver with the most flexibility and the least amount of work. Think 
of them as supplying you with a toolbox full of tools to make good websites. 


They are deceptively packed with information, and they are designed to also 
act as reference after you are finished completing them. Web pages across 
the web have many similarities, and the information here is designed to cover 
many of these similarities. 


These pages were design for viewing on an iPad, and that is where they will 
work best. Even better is to open this in a iPad pdf reader (such as Good Reader 
or iAnnotate). These programs allows you to not only make bookmarks, but 
also make notes on the pages. 


Do not try to follow these tutorials with them on the same screen as Dream- 
weaver. If you have two screens, put them on the second screen. If you have 
access to two computers, put them on one computer and open Dreamweaver 
on the second. Ina pinch you could use an iPod Touch, iPhone or other large 
screen phone in landscape mode. If all else fails, you could also print these out. 
They are formatted to fit two to a letter-size page in landscape mode. 


It is very important that you try to somewhat understand what you are doing 
in these tutorials, and I would recommend doing each at least twice, the sec- 
ond time trying not to look at the instructions. Tutorials not done this way have 
a tendency to go in one ear and out the other. 


If you have problems with doing the tutorials, just go back as many steps as 
needed and try again. There also may be mistakes in them or confusing bits - 
please let me know when you find these so that | can correct them. 


And finally, these tutorials are designed to be done on a Macintosh although it 
wouldn't be much different on a Windows computer. 
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Lesson 1: 
Making simple pages 
and links 


A web page is simply a bunch of words. In a browser, such as Safari, you can go 
to the menu View / View Source, and you can see this ‘source code: The brows- 
er’s job is to take all this source code and make it into something more visual. 
Much of the source code in a web page tells the browser how to do this. 


This is very different from just about any other application where the ‘source 
code’ (the stuff that tells the application how to display it) is totally hidden from 
the person using that application. 


In this tutorial you will be making a very simple website, and I will have you 
display the code on the page just to get used to it. You don’t ever really need to 
know what all of it means, but eventually you will have to deal with it on some 
level. 


Open Dreamweaver. If the welcome screen appears you can disregard it. 
Go to the menu Window / Workspace Layout, and choose Designer. This will 
get us in sync so that my examples look somewhat like what you will get. If 
you have moved windows around in the Designer layout, you can reset it to 
the defaults by choosing Reset ‘Designer’ in the same menu. 


Code Inspector 
Results 
Extensions 


Workspace Layout One Monitor 
Hide Panels 
Application Bar 


App Developer 
App Developer Plus 


Cascade Classic 

Tile Coder 

Combine as Tabs Coder Plus 

Next Document cme v Designer p 
Previous Document 8° Designer Compact 


Dual Screen 
v (No Open Documents) 


Reset ‘Designer’ 
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Before we get started making something we have to define a site (some- 
where you want to put all your stuff). Dreamweaver likes to keep all your 
files straight so that your life is easier. It will come in handy later. 


In the Files Panel (on the lower right of the screen), there is a little pull 
down tab that lets you manage sites. 


| 
‘@ Computer 
Sei 
[I AAUP Site 
[A aaurz Site 
(a apple site 
T] Course Materials 


[A Course Materials -Fedeler 
B Maurer Photo 

[I Mediacom test 

B quxl site 


(a test desktop2 


i: Manage Sites.. K 


Name your site with something like your name, and specify a location. 
Since this is temporary, you might want to use a folder on your desktop to 
contain the site. All of the information for your site will be in this folder. 


Site 
Servers 


A Dreamweaver site is a collection of all of the files and assets you use i 
your website. A Dreamweaver site usually has two parts: a local folder on 
Version Control your computer where you store and work on files, and a remote folder o! 
Advanced Settings server where you post the same files to the web. 


Here you'll select the local folder and a name for your Dreamweaver site. 


Site Name: | MyName 
Local Site Folder: |/Users/beezy/Desktop/MyNameWebsite 
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Now we are ready to make a page. Go to the menu File / New. There are a 
lot of options here, but the most useful is the simplest - choose blank page, 
HTML, and <none>. 


Page Type: Layout: 


HTM! 
=) Blank Page D l uana 


HTML template 1 column fixed, centered 
>) Library item 1 column fixed, centered, header and fc 
XSLT (Entire page) 1 column liquid, centered 


When the new window comes up, push the Split button near the top left of 
the window to go to Split View. Now the window on the left is the source 
code, and the window on the right is the design. Don’t get intimidated by 
this code. We are going to have to keep track of it later (sorry about that), 
but you really don’t have to know what everything means. 


In the Design Window (on the right) type something like the first page, hit 
the return key, and type something like go to the second page. That will be 
our link to the second page pretty soon. Your font may look different than 
mine. 


While you are at it, name your page in the blank box at the top of the win- 
dow labeled Title:. Not very important at this point, just a good habit to get 
into. 


€ Untitled-3 (XHTML)* 
Inspect | @) | Multiscreen ©. Title: First Page 


E, 
ML 1.8 Transitional 


1-transitional.dtd"> i 
tea The first page 


t="text/html; charset=UTF-8" /> Go to the second page 
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Save your page into the folder you defined before with your name. Call 

it something like FirstPage. Try to get out of the habit of using spaces (or 
punctuation) in a filename. You can use camel-case like in this example, or 
use underscores to separate words. 


Save As: FirstPage.html (a) 
m) | C MyNameWebsite re Q 


Make a new page like the one we made before, but this time type some- 
thing like The second page, hit return, and then type Go to the first page as 
what will be our link. 


Insert Modify Format Commands Site Window Help 


View || Inspect | @) | Multiscreen ©. C 


ML 1.8 Transitional 


1-transi tional .dtd"> 
mace The second page 


t="text/html; charset=UTF-8" /> 


Go to the first page 


Save the page in the same place as the last one you saved. 


Save As: SecondPagelhtml (a) 
| C MyNameWebsite req Q 


0 FirstPage.html 
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With the second page still open, highlight go to the first page, and then go 
to the Insert Panel on the top right of the screen and choose Hyperlink. 


ADOBE BROWSERLAB 


{ Common i) 


Hyperlink 
$ 


Email Link 


Named Anchor 


Horizontal Rule 


Table 


Click the small folder icon and navigate to the first page and choose it (this 
is where we want the link to take us). 


Hyperlink 


Text: Go to the first page 
Link: 


Target: 


Title: 


fato) fE m) | CI MyNameWebsite 


Y DEVICES in me Jpg ~ 6 FirstPage.html 


i - Dreamwe...z006.jpg F) 
Tab index: ©) SecondPage.html|| 
EE seezy Dreamwe...z007.jpg = 9 


H iDisk | Eligibility ...n.webloc 
Siri MyNameWebsite > 

Y SHARED | Order pr... order.pdf 
= Gandolf PrintGreatShots.pdf 


| Screen sh...8 PM.png 
Patent a. test.html 


Access key: 


Notice that in the Properties Panel at the bottom of the screen the Link 
type box has the name of your first page in it. If you don’t see the box, click 
on the HTML button on the left of the panel. You could have just typed it in 
here, and there are also many other ways to make a link. 


Format | Paragraph E) Class | None B] 


B) Link FirstPage.html 


Page Properties... List item.. 
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Save your second page, close the window, and open the first page by 
double-clicking on it in the Files Panel on the lower right of the screen. 


Make a link for the Go to the second Page type the same way you did for the 
second page, but of course this time specify the second page as the one to 
link to. 


Very important - now save your file since we are going to be testing it. 


v [2 Site - MyName (... 


BD FirstPage.h... 
A SecondPag... È 


At the top of the window, find the little globe and choose a browser to 
preview your file in. After it opens, you should be able to go back and forth 
between your two pages. If not, then try this short tutorial again. 


View nser viodity orma 


Preview in Chrome 

Preview in Firefox.app 

Live View | | Inspect Ge Multiscreen | ©] | Preview in Internet Explorer.app 
4 Preview in Netscape.app 

Preview in OmniWeb.app 

DTO XHTML 1.0 Transitional //EN" . Preview in Opera.app 


y /Desktop/MyNameWebsite /FirstPage.html 


Preview in Safari.app Xr12 
Preview in Device Central AX Fi2 ! 
Preview in Adobe BrowserLab ‘?3F12 


Edit Browser List... 
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What you have just done in this tutorial is make your first website. Here is 
how to prove that: Quit Dreamweaver, open the folder that you made, and 
open one of the two files in a web browser (just drag the file onto the Safari 
icon). 


You could take this folder and save it to another drive, open it on another 
computer, or email it to someone. You could even upload it to a web 
server, and the whole world could see your creation. As long as the files 
stay in the same places in that folder, it will work fine. 


There is one last step in this tutorial. Open Dreamweaver, and do the whole 


thing over again. Maybe this time without looking too much at these in- 
structions. Look at the code. Try to figure out what is going on. 
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Lesson 2: 
Structure, images, and 
text, oh my 


In the last tutorial you learned how to make a web site, and if you just want 
words and don't care how it looks, you learned pretty much all you need to 
know. 


In this tutorial we will be making a web page and adding photographs and text 
formatting. More information choices, nicer to read. 


Before you start, go to some web sites and grab a couple of photographs. 
Just drag them off the browser page onto the desktop. Don’t get any that 
are more than 350 pixels wide. On a Mac with a folder in column view it 
shows you the pixel size of photographs that are selected. 


Next we need to start doing things right. The folder that you made in the 
last tutorial only has two things in it, so it is no problem keeping those 
things straight. In actual practice, there may be dozen, hundreds, or thou- 
sands of things in this folder, so we better start organizing it. 


Make a folder named images in your web root folder, which is the folder 
with your two files in it. Images is not an arbitrary name, but one that con- 
vention dictates. Put your photographs from the web in this folder. 


C MyNameWebsite ©) FirstPage.html æ FromBBC.jpg 


E images  FromBBC2.jpg 
©) SecondPage.html 
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Open Dreamweaver, and look at the Files Panel - the images folder you 
made should be in there and look something like the example shown. Click 
on the little disclosure triangle to show the contents of your images folder. 


B - MyName (Pi:Us... 


FirstPage.html 

v [I] images 

“S| FromBBC.jpg 
“|  FromBBC2j... 
SecondPage.html 


Make new file in Dreamweaver the same way you did in the last tutorial 
(HTML, <none>.) Put any title in the title box at the top (I titled the page 
The Home Page). Save it as index.html in your web root folder. This filename 
is not arbitrary. If your site was on-line, visitors would automatically be di- 
rected to the page called “index” While on the subject, filename extensions 
(like .html) are very important. In the web world the right extensions are 
always needed. It is a good thing applications put them on automatically. 


Save As: index| htm! (a) 
| C MyNameWebsite rH Q 


Y DEVICES 0 : FirstPage.html 
om 


IE Beezy images 
=| iDisk SecondPage.htm! 


Pi 


This is a good point to take a quick look at the source code (you should 
still have the Split View turned on with the button on the upper left of the 
window). 
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The first three lines of code you can disregard - these are just telling the 
browser what type of language it is speaking. 


Look at the line that starts with <title>. <title> is a tag opening. You can tell 
it is a tag because of those pointy brackets on either side. Following this is 

what you named your web page, and following that is a closing tag (often 

just like the opening tag but with the addition of a forward slash. 


These tags tell the browser what you want to do with the text (or whatever 
else) between them. In this case it is telling the browser to put the words 
The Home Page on the top bar of the web page (when viewed in a browser). 


You can change the title of the page right there in the source code, and it 
will be updated in the little box you actually typed it in. As a matter of fact, 
you could have typed in the code and the text without ever going to that 
little box (but of course it was easier to type it in the little box and have 
Dreamweaver put in the tags for you). Some people still do web pages in 
text editors, and just type it all in. That seems too difficult to me. 


This is the way Dreamweaver works - in the Design Window you type, and 
the program puts in tags and other things for you. The reason you need to 
deal with the code at all is that Dreamweaver will sometimes do it wrong. 

Not the fault of Dreamweaver, just the way that HTML code works. 


Code [split | Design Live Code | F Live View | | Inspect | @)_ | Multiscreen | k, 


Address: file:///Pi/Users/beezy/Desktop/MyNameWebsite/index.html 


<IDOCTYPE html PUBLIC "-//W3C//0TD XHTML 1.0 Transitional //EN" 
“http://www .w3.org/TR/xhtmL1 OTD /xhtmL1-transi tional .dtd"> 

<html xmins="http: //www .w3.org/1999/xhtmL"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>The Home Page</title> 

</head> 


<body> 
</body> 
</html> 


That is enough code for now, so let's make things simpler to look at by go- 
ing to Design View (the button on the top left of the window). 
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Just like in a word processing program, a paragraph is defined as what 
happens before or after you hit the return key. Make a very short paragraph 
and a longer paragraph in the design window. The short paragraph in the 
example below is simply My Web Page. 


Code i Live Code | £ | Live View | | Inspect | @)_ | Multiscreen K, CŒ 


A Address: file:///Pi/Users/beezy/Desktop/MyNameWebsite/index.html = fe) 


My Web Page 


This is the second paragraph. And what a paragraph it is. None too shabby of a p4 
It has words, it has sentances, it even now has a couple of commas. Oh how | wis 
what if | asked a question? 


Now might be a good time to check the spelling, since | suspect there is 
a mistake. In Dreamweaver Check Spelling is enigmatically placed in the 
Commands menu. 


Add an image (photograph) now. With your cursor (insertion bar) at the 
end of the first paragraph, hit return to make more space between your 
paragraphs. In the Insert Panel, click on Images : Image and choose a photo- 
graph from the ones in your image folder. It will ask if you want an alternate 
text for the image. For now we can click through this box (just hit OK). 


Hyperlink 
Email Link 


= rm) (ipimages 2) Q Named Anchor 


Horizontal Rule 


5 FromBBC.jpg Y Preview: 


A FromBBC2.jpg " Table 


Insert Div Tag 


[Z] ~ Images as 


g ~ Media 


Name FromBBC2.jpg 
Kind Adobe Photoshop 


i EG | 


Document index.html 
Link Relative To in the site definition. {no styles defined) 
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Go ahead and add the other photograph after the second paragraph. 
Remember to put the cursor at the end of the paragraph and hit return 
before you insert the image. Notice that the images came into your web 
page the same size as they were in the web page you took them from. You 
could change the size of images in Dreamweaver, but DON'T! EVER! They 
don't display very well and take more memory (which translates to down- 
load speed). You can always size them in Photoshop - the size they are in 
Photoshop at %100 is the same size they will display in Dreamweaver or in 
a web browser. 


Live View | | Inspect ®. Multiscreen Se, ~ Title: The Hom 


5 o> © © Address: file:///Pi/Users/beezy/Desktop/MyNameWebsite/index.html $ E, 


My Web Page 


This is the second paragraph. And what a paragraph it is. None too shabby of a pa 


It has words, it has sentences, it even now has a couple of commas. Oh how I wish 
what if | asked a question? 


While on the subject of good habits, it probably about time you save your 
file. Just hit the Command and S keys if you don’t know that already. 


Before the end of this tutorial we should format some of the text and lay- 


out. This will turn out to be background information since we will later be 
doing it a bit differently. 
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Highlight your first paragraph (the short one) by dragging your cursor 
across it just like in a word processing program. In the Properties Panel, 
make sure that the HTML Button is pressed on the left. Change the Format 
Button to Heading l. 


What this does is put a tag around your words which tells your browser to 
make the type bigger in a pre-defined way (h1). Go to Split View and check 
it out in the source code. If you still have the paragraph highlighted Dream- 
weaver will also highlight it in the source code. 


Format | Heading 1 B 
ID None (E) 


Let's center this paragraph now. Go to the menu Format / Align / Center. 
Now if you look at the source code you will see that Dreamweaver has 
changed the tag to specify that the type be bigger and centered. The 
emphasis on the source code in these tutorials is necessary - if it wasn't, | 
wouldn't include it. In the end it does make things easier. On the good side, 
nowhere will | ask you to actually write any code! Maybe just move some 
tags around... 


Commands Site Window Help <title>The Home Page</title> 
</head> 
Snl <body> 
< = ody 
Outdent CHL f inspect | Q, | Multiscree <hi align="center" My) Heb Page</hi > 


> <p><img sre="images /FromBBC2. jpg" width= 
Paragraph Format <p>This is the second paragraph. And wha 


Left XOEL sentences, it even now has a couple of cq 

E y Center XOR8C ves src="images/FromBBC.jpg" width=" 
ody > 
</html> 


Now you know enough to do a fairly good extremist wingnut website. Play 
around with the techniques you have learned so far. Make a link to one of 
the pages you did in the first tutorial, center your images (just click on them 
to highlight them and center them the same as you did text). Add some 
more images. Preview the whole thing in a web browser to make sure 
everything is working right. 
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You might also experiment with other ways of doing things so that they are 
more convenient for you. Try dragging an image file directly to the page 
from the Files Panel. Or try to define a link to another page by highlighting 
a word or an image and then dragging that cross hairs icon (in the Proper- 
ties Panel [html]) to the file in the Files Panel you want to link to. 
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Lesson 3: 
CSS for type formatting 


CSS stands for Cascading Style Sheets. This name will make a little bit more 
sense after you know how to use them. We will be using them for two things. 
The first is to format text. The second is to lay out a web page, and this will be 
covered in the next tutorial. 


All web designers use CSS in preference to formatting by other methods (like 
the h1 tag you used in the last tutorial). It is far more powerful and flexible. But 
it is a bit more complicated. Try to get your head around it in this tutorial, since 
we will build upon the knowledge in the next chapter. 


If you didn’t save your page from the last tutorial, or messed it up quite a 
bit, then make a new one which approximates it. 


Highlight the second (longer) paragraph and in the Properties Panel, 
choose the CSS version of the panel on the far left. It is unconventional for 
an application to have two modes to a panel, so try to remember there are 
two modes in this one. 


Make sure the Targeted Rule box is set for New CSS Rule, and click the Edit 
Rule button. 


PROPERTIES 


<> HTML Targeted Rule <New CSS Rule> 


b css Edit Rule CSS Panel 


PAYNE’S DREAMWEAVER CS5 TUTORIALS 18 


The box that follows deserves some special attention. The selector type of 
your rule should be Class (can apply to any HTML element). There are four 
different types of CSS rules, but only three of which we will need to use. 
This is one of those three. 


The name for your selector is up to you. Since | am going to use this rule for 
my main text, | will call it maintext. Convention is to apply names with no 
spacing, punctuation, or capitol letters. 


One of the very cool things is that you can define rules that you can use in 
multiple pages, and make changes across multiple pages in just one place. 
But here we don't need to, so we are going to put the rule within our web 
page (This document only). After you have the three settings done, click OK. 


Selector Type: 


Choose a contextual selector type for your CSS rule. 


| Class (can apply to any HTML element) 


Selector Name: 


Choose or enter a name for your selector. 


maintext 


This selector name will apply your rule to 
all HTML elements with class "maintext”. 


Less Specific More Specific 


Rule Definition: 


Choose where your rule will be defined. 


| (This document only) | 
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Now that we have told Dreamweaver what kind of rule we want and where 
to put it, we can determine what the rule will do to the text we have select- 
ed. You can make your own choices. In the example below I have specified 
(with the pull-down button to the right of the box) that | want a sans-serif 
font, and if the viewing computer has Arial installed it will use it. If there is 
no Arial, then it will use Helvetica. Web pages don't have their own fonts, so 
they must use the fonts available on the computer you view the pages on. 


| have also specified that the text be 12 pixels high and grey. Go ahead and 
look at the options you also have in the Block category of this box. You can 
specify things like tracking and leading. 


CSS Rule definition for .maintext 


Category Type 


Type 
Background Font-family: Arial, Helvetica, sans-serif 


Font-size: 12 is) px B) Font-weight: 


Font-style: (Z) Font-variant: 
Positioning 
Extensions 


Line-height: (Z) px $ Text-transform: 


Text-decoration: {_ | underline Color: I| #666 
{_} overline h 

] line-through 

! blink 


| none 


After you click OK, you should see the type you highlighted change to 
conform to the rule. Now is a good time to see what all of that work did to 
your source code. Near the top of your code (in Split View) is your rule with 
a period before the name and the definition in curly brackets ({ }). That is 
the rule definition. See if you can find out where in the code it is applied to 
your paragraph (look for maintext elsewhere in the code). 


<title>The Home Page</title> 

<style type="text/ess"> 
This is the second paragraph. And what a paragraph itis. None tq 
necessary requisites of a paragraph. It has words, it has senten 
how | wish | could find a reason to use an exclamation mark! And 


smaintext { 
font-family: Arial, Helvetica, sans-se! 
font-size: 12px; 
color: #6635 


E 
</stule></head> 


PAYNE’S DREAMWEAVER CS5 TUTORIALS 20 


Go ahead and make a third paragraph, highlight it, and apply the rule you 
just made to it. The choice of applying the maintext (or whatever you called 
it) style will be in the Targeted Rule selector in the Properties panel. 


If you know how to use paragraph styles in a word processing application 
or in InDesign this should be somewhat familiar. 


New Rule 


Targeted Ru W EATR Font Default Fon 


<New Inline Style> 


Size None 
Apply Class 


<Remove Class> Page Properties 


If you want to edit your CSS rule, it is easy. Put your cursor anywhere in the 
text that has the rule applied to it. In the Properties Panel the Targeted Rule 
will be .maintext (or whatever you called it). Just click on the Edit Rule but- 
ton and you can make any changes you would like. Try at least changing 
the color or the size of the type. 


PROPERTIES 


<> HTML Targeted Rule | .maintext B Font Arial, Helvd 
B css Edit Rule _|ẹ CSS Pane 


To reinforce this a bit, make another rule. This time highlight your first para- 
graph (the short one) and make a rule which changes the color and size of 
the text like in the first style you made. | called this style bigtype since it is 
what | might use for things like headers. Things on your web page should 
be looking better. If not, edit your rules to make them look better. 


_CSS Rule definition for .b 


Category Type 


Type 
Background Font-family: Arial, Helvetica, sans-serif 
Block 


Box Font-size: 36 Zi px $) Font-weight: 


Border 
List Font-style: Z] Font-variant: 
Positioning À O ~ 

Extensions Line-height: (2) pr 


Text-transform: 


Text-decoration: {_| underline Color: BE #F00 
meee 


PAYNE’S DREAMWEAVER CS5 TUTORIALS 21 


Let's go back to links. Make a word in either of your paragraphs a link. | 
need to show you a bit different way of doing it. With the word highlighted, 
click on the folder icon next to the Link box in the Properties Panel. Choose 
one of the pages you made for the first tutorial as the link and click OK. 


cwrs 


This is another SEEREN. t is actually the third one. And a darned fine one itis. Itis going to have the same rule applid 


PROPERTIES 


<> HTML Format | Paragraph Z| 
fh css ID None B) 


Click anywhere in the Design View to deselect the word you highlighted. It 
should now be blue and underlined, because that is the way links are made 
to look, and this overrides the CSS style you made (but notice that the type 
size and style is the same). 


We are going to change the look of the links on the page, and we are going 
to do it by applying a CSS style to override the html convention that says 
links should be blue and underlined. 


For this one your cursor can be anywhere. In the Properties Panel (with the 
CSS button pushed, select <New CSS Rule> and click the Edit Rule button. 


PROPERTIES New Rule 


<> imu, | Targeted ru PARE 
<New Inline Style> 


B css || E | 


| 


Apply Class 
<Remove Class> 
v 


The resulting box should be familiar from before, but this time we are go- 
ing to choose Tag (redefines an HTML element) as the selector type. This is 
because we are not really going to define a rule from scratch, but edit an 
existing tag to make things look different. You should start to get an idea of 
why I am having you look at code every once in a while. 
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There are bunches of tags in HTML, but the one that defines a link is at the 
very top, and is called a. Select it from the pull-down list and click OK. Then 
wonder why it is not called link (which is in fact another tag) 


Selector Type: abbr 
acronym 
address m 
{ Tag (redefines an HTML element) applet — 
area 
b 
base 
Choose or enter a name for your selector. basefont 
bdo 

f big 

blockquote 


This selector name will apply your rule to body 
all <a> elements. br 


Choose a contextual selector type for your CSS rule. 


Selector Name: 


button 


In the (by now familiar) CSS edit box that comes up, choose some attributes 
that might lend themselves to calling out a link. I chose bold, red, and 
turned off the underline by clicking none for the Text-decoration. 


CSS Rule definition for a 


Category Type 


Type 
Background Font-family: 

Block ————. p- 
Box Font-size: px $ Font-weight: bold 
Border — 

List Font-style: Font-variant: 

Auek Line-height: x $ Text-transform: 


Text-decoration: {_| underline Color: W| #Foo 
[_] overline 


[_] line-through 
[] blink 
MÍ none 

k 


Click OK, and you should now see your text specifications applied to your 
linking text. It will also be automatically applied to any other links you 
make on the page 
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You didn’t need to specify the font in what you just did unless you want to 
change it from the font you specified in maintext. We have a rule (the a rule) 
inside another rule (maintext). Whatever you don't specify in the inside rule 
will be governed by the outside CSS rule. 


You might see in the code that there is a tag which governs everything 
displayed on the page - it is called the body tag. We could also apply a CSS 
rule to this tag, and thereby have a rule within a rule within a rule. If nothing 
from the larger rule is changed by the rule within it, then it stays the same. 
Hence the Cascading in Cascading Style Sheets. We will see more cascades 
in the next tutorial. 


You can actually see the cascade of tags (CSS styles become tags). Put your 
cursor anywhere in a link you made and look at the bottom left of the de- 
sign window. You will see <body> first, since that is what governs the whole 
page, then you will see the maintext tag within it (applied to a paragraph, 
hence the p), and finally within that the link (a). More on this very soon. 


LGETILY$IM AGES] 


This is another paragraph. It is actually the third one. And a darned fine 


<body> <p.maintext> <a> 


From the example below you can also see that the CSS rule that changed 
our a tag doesn't have a period before it. This tells the browser that it is a 
rule which changes a tag, not a rule you made and happened to call a. 


<style type="text/css"> 


smaintext { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #663; 


3 

.bigtype { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 36px; 
color: #Faa; 


af 
font-weight: bold; 
color: #Faa; 
text-decoration: none; 


<fstyle></head> 


<body> k 
<span class="bigtype" >My Web Page</span> 
<p><img src="images/FromBBC2.jpg" width="144" 
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Now go back to Design View. We want to change our links so that when we 
roll over them, the color changes. Rollover is also called hover. 


Go to the menu Modify / Page Properties. In the Links (CSS) Category, adda 

different color to the Rollover links. In this case | made that color black. You 
could have also defined the red color and the bold style of links in this box. 
Press OK. 


Modify 
YX. Y age Properties... p 3] | 
bent eters S 


Category Links (CSS) 


Appearance (CSS) 
Appearance (HTML) Link font: (Same as page font) (B) E 
Links (CSS) t — 
Headings (CSS) Size: 8 px 

Title/Encodin —— p 
Treieg pesca Link color: BA Rollover links: #333 Į 


Visited links: [ Active links: 


Underline style: | Always underline B) 


( Apply X { Cancel ) =) 


When you preview your page in a browser (using the globe at the top of 
the window or you can also press the option key and f12 at the same time) 
you will see that your links change colors when your cursor gets to them. 


Instead of previewing in a browser to test things like this you can also click 
the Live View button at the top of the window. It will not necessarily look 
the same as in a browser, but it should be close. Just remember to turn off 
Live View when you are done, since when it is on it alters the way Dream- 
weaver works. 


In this tutorial we have bitten a lot off. It would be wise to go back through 
it and make sure you understand what we did. Experiment with things and 
try different ways to do things. We used the Property Panel in this tutorial, 
but there is a CSS Panel on the right of the screen devoted to making and 
editing CSS styles. Try using it. 
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Lesson 4: 
Using CSS for Layout 


You may have noticed that we have gotten absolutely nowhere in being able to 
change the layout of web pages so far. With this tutorial that will change. 


In the past, things called tables were used for layout, and they were pretty sim- 
ple. But they are not really used much anymore (that is a good thing overall), so 
layout had to wait until we got a bit of a handle on CSS styles. 


We will now apply a layout to our page using CSS styles. I am going to use the 
same page as | was using, but you could use a new page populated by text and 
images. 


Web pages, unlike a physical page, have only two fixed borders - on the 
top and on the left. The bottom and right sides have no defined border. 
The bottom goes on for as long as you can scroll, and the right side will 
change according to how large your browser (or Dreamweaver) window is 
stretched to. 


So, our first task is to make a defined right border. This is almost always 
done by making a column in the middle of the page that moves to center 
once the browser window gets wide enough. Look at a few websites - if 
your browser window is larger than a certain point then the information 
centers within it. 


This container for the information is what we will make using CSS layout. 
The first thing we need to do is select the whole page. You would think 
that dragging your cursor over the whole thing would do it, but it doesn’t 
necessarily. 
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With your cursor anywhere in the Design View, go to the bottom left of 
the window and push <body>. This is actually a button which selects 
everything within the body tags. That is everything on the page. 


>} <p.maintext> <a> 


With the body button selected, go to the Insert Panel (on the right, remem- 
ber?) and click the /nsert Div Tag button. A div tag can be thought of as a 
layout tag. 


INSERT 

(Common b$ 
Hyperlink 
Email Link 
Named Anchor 
Horizontal Rule 


Table 


Insert Div Tag hy 


In the resulting box you want to make sure to insert the tag around around 
everything, so select Wrap around selection (remember we selected every- 
thing). Now press the New CSS Rule button. 


Insert Div Tag 


Class: 


oe 


(New CSS Rule) 


el 


k 
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Use the ID (applies to only one HTML element) selector type as that is the 
one most suitable for layout tasks (although you could use others). Call this 
container. That is a conventional name that many use for this purpose. 


Selector Type: 


Choose a contextual selector type for your CSS rule. 


Cancel 


| ID (applies to only one HTML element) 


Selector Name: 


Choose or enter a name for your selector. 


container 


This selector name will apply your rule to 
any HTML elements with id “container”. 


We could define the way that text looks, but here we are only interested 

in layout. Go to the Box Category, and choose 800 pixels as a width for the 
container. You could make it bigger or smaller. Everything in your page 

will be in this container and therefor be no wider than 800 pixels. For Clear, 
select both, and for Margin select the information shown (uncheck Same for 
all). Click OK. 


CSS Rule definition for #container 


Category 


Type 
Background <=, 


Block Width: 800 A Foa: 


Box 


Border Height: (B) px : Clear: (B) 
List 
Foskioning Padding Margin 
Same for all [_] Same for all 
Top: 0 & = __ 
Right: auto (Z) px : 
Bottom: 0 B) | =] 
Left: auto} _ px ; 


Extensions 
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Looking at your Design View you can see (if your window is stretched out 
enough) that there is a dotted box that is 800 pixels wide. The dotted box 
would not show if you looked at the page in a browser - it is a visual aid in 
Dreamweaver. 


But our container box is not centered. We have to do one more thing to 
center it, and that is redefine the < body> tag the same way we did for the 
link (a) tag. 


In the Properties Panel (in CSS mode and with <New CSS Rule> as the Tar- 
geted Rule) click Edit Rule. 


Targeted Rule <New CSS Rule> + 


Edit Rule w CSS Panel 


Since we want to redefine the <body> tag, select Tag (redefines and HTML 
element) as the selector type and select body as the name of the selector. 
We can choose from a list here since we are redefining an existing tag and 
not making one up ourselves. As in all of the CSS we are making in this 
website, choose that the rule be defined for (This document only). Click OK. 


acronym 
address 
Selector Type: 
applet TD) 
Choose a contextual selector type for your CSS rule. area 
( Tag (redefines an HTML element) b 


base 


basefont 
Selector Name: bdo 


Choose or enter a name for your selector. big 
blockquote 


[Poa 7 body n 


br 
This selector name will apply your rule to button 


all <body> elements. caption 


center 
cite 
code 
col 
— — — — colgroup 
Less Specific More Specific | dd 


del 
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The only thing we need to enter in the resulting box is in the Block Cat- 
egory. For Text-Align, choose center. Text-align is really ill-named in this case. 
What it really means is everything-align, and since we want our container 
centered, this will do it. Click OK. 


CSS Rule definition for body 


Category 


Type 

Background 

Block Word-spacing: 
Box 

Border Letter-spacing: 
List i k 
Positioning Vertical-align: 
Extensions 


Text-align: center 


Text-indent: 


White-space: 


Stretch out your Design Window and you will notice that now our 800 pixel 
container remains centered when the window is stretch past 800 pixels. 


You should, however, notice a problem. All of the elements within the con- 
tainer are also centered. This is because the centering we did for the body 
cascades through all of the page since no other style tells it to do other- 
wise. So, let’s tell our container to align everything to the left. 


We are going to edit the rule a little bit differently this time so you get used 
to the CSS Panel. Go to the CSS Panel on the right of the screen and choose 
#container (you may have to click All at the top of the panel and also click a 

discloser triangle to see it). After #container is highlighted (# means it is a ID 
tag), click the small pencil icon at the bottom of the panel to edit the rule. 


Properties for "#container" 
1 AL HY eis 
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The only thing we need to do here is change the Text-Align to left. This 
will not only effect the container, but everything in it (unless another style 
changes it to something else). Click OK, and your text and images are now 
aligned to the left. 


You could have specified the container rule to be aligned left when we 
made the container rule. | had you do it this way to show you how rules 
apply to every thing within them unless defined otherwise by something in 
them. Also to show you how easy it is to change a rule at any time. 


CSS Rule definition for #container 


Category 


Type 

Background 

Block Word-spacing: 

Box 

Border Letter-spacing: 

List E A 

Positioning Vertical-align: 

Extensions Text-align: 
Text-indent: 


White-space: 


Display: 


Up to this point everything in this lesson is something you could easily use 
for every web page you make. 


Now | am going to have to make a design decision. Since a 2 column layout 
with a header (information across at the top) is fairly common, let's give our 
page that layout. 


Let's first define a space for the header. Highlight your short paragraph and 
click the Insert Div Tag button in the Insert Panel. 


Email Link 


| Design | Live Code | F4 Live View | | Inspect | ©) Multiscreen | KA 


Address: file:///Pi/Users/beezy/Desktop/MyNameWebsite/ index.html 


Named Anchor 


Horizontal Rule 


Table 


Insert fy Tag 


z ~ Images : Image 


I~ Media 
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Making sure that the requestor box is set to /nsert: Wrap around selection, 
click the button to make a New CSS Rule. 


Insert; | Wrap around s... : 
mee e 
So | 


ID: 
( New CSS Rufe ) 


Change the selector type to ID (applies to only one HTML element) and name 
the style something descriptive like header. 


— Ge 
Choose a contextual selector type for your CSS rule. 


ID (applies to only one HTML element) i) 


Selector Name: $ 


Choose or enter a name for your selector. 


C E 


This selector name will apply your rule to 
any HTML elements with id "header". 
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In the Box Category, enter in the information as in the illustration below. 
The margin is how much room around the box there will be. | set it to 20 
pixels just to get it away from the very top of the page. You can always 
change any of these things later. Click OK when you are done. 


CSS Rule definition for #header 


Category 


Type 
Background ed 


Width: 600 (ex) Foa: 
Height: [o e px B] Clear: 


Positioning Padding Margin 


Extensions = 
M Same for all |_| Same for all 


Top: 


Now is a good time to point out that in web (as with anything where the 
screen is the final medium), we don't use inches as a measure. It really has 
no meaning since screens come in all different sizes and resolutions. Pixels 
is the unit that is used for most things. Get used to thinking in terms of 
them. 


As a frame of reference, the computer you are working on has a pixel 
dimension of at least 1024 pixels (wide) by 768 pixels high. Most newer 
computers exceed this dimension. 


Anyway, in the Design View you can see that the box that we made for the 
header is shown by dotted lines. We could have made our header longer 
than 600 pixels, but since we are not going to be using the upper right, this 
measurement works fine. And you can always change it later. 
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Now let's make a left column in the same way you made the header. Select 
everything you want in the left column - in my case | selected the first 
photograph and the first paragraph. Click the /nsert Div Tag button in the 
Insert Panel. 


Horizontal Rule 


Table 


Inse rty Tag 


[Z] ~ Images : Image 


£~ Media 


@ Widget 


As before, make a new rule and change your selector type to ID. Name your 
rule something descriptive. | named it leftcolumn. 


Selector Type: 


Choose a contextual selector type for your CSS rule. 


| ID (applies to only one HTML element) re 


Selector Name: 


Choose or enter a name for your selector. 


a C 


This selector name will apply your rule to 
any HTML elements with id “leftcolumn". 
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Enter the information as in the example below. | am making two columns, 
and entered 350 pixels as the column width. | can always change this later. 
Float commands the box to align to the closest left border, which in this 
case is the container edge. Padding is how close to the box text or photo- 
graphs contained within it come to the edge. Margins are how much room 
around the outside of the box there is. 


One strange thing is that both padding and margins are added to the 
dimensions of the box. That is why | entered 350 instead of 400 (half of 800) 
for the box width. 


CSS Rule definition for #leftcolumn 
Category Box 
Type 
Block width: [350 ](@) (ox A Float: ek A 
Border Height: GA lex +) Clear: 3 
List 
rone Padding Margin 
mM Same for all M Same for all 
Top: 10 S) CHS Top: 10 (Z) CHIZ) 
Right: 10 7) fpr Right: 10 + | px z) 
Bottom: 10 + | fpe Bottom: 10 + | [poe E] 
Left: 10 +) (px Left: 10 >) (px 9 
Ls 
Cher ) Corr) (ne) KD) 


If I now look at my design view I can see that my header and left column 
are where they should be, and the rest of the information comes after it as 
it will (your example may look different than this - that is fine). 
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Now you need to add the right column. Select whatever information on 
your page we haven't dealt with yet. In my case it is the second photograph 
and the second paragraph. Click Insert Div Tag in the Insert Panel and make 
another new CSS rule. As in the last column make sure the selector type is 
ID and name the selector something descriptive such as rightcolumn. 


Enter the information as in the example below. You will notice that it is the 
same information we entered for the left column. In this case the Float: left 
will cause the box to still align with the closest left border, which in this 
case is now the left column (in this case we could have actually had it float 
right). If the width of the right column was too large (which it is not), then it 
would simply slide under the right column to where it would fit. Click OK. 


CSS Rule definition for #rightcolumn 


Category 


Type 
Background TEE 


Block Width: 350 (x B Float: left B) 
Box een 
px Clear: B) 


Border Height: 8 
List 


Positioning Padding Margin 
m Same for all mM Same for all 


Top: 10 Z] | px E) Tj A px B) 


Extensions 


Right: 10 px B) Right: 10 + | px E) 
Bottom: 10 s px B] Bottom: 10 
Left: 10 +| ppr B) Left: 10 


( Apply )( Cancel ) (0K) 


Go to your Design View, and see that everything is pretty much how it 
should be. 


There is one problem, however. The container box now looks like it stops 
with the header. It shouldn't, as it really does contain everything. But it still 


looks that way. 


The easiest way to cure this is to go into the code and change it. This will 
also give us a chance to work with code for just a bit. 
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Switch from Design View to Code View (upper left of your window). Near 
the top of the page you will find where the CSS styles are defined (see illus- 
tration below). Place your cursor right before </style><head> and push the 
return key several times. Empty lines don’t matter in HTML, so don’t worry 
about extra paragraph returns in Code View. Type the following exactly, 
and don't forget the period at the beginning or the bracket at the end: 


-Clearfloat { 
clear:both; 
height:0; 
font-size: 1px; 
line-height: Opx; 


gl gi 

margin: 10px; 3 margin: 10px; 
padding: 10px; padding: 10px; 
float: left; float: left; 

width: 350px; width: 350px; 


ge Mh lt 


E } 
body { body { 


text-align: center; 9 text-align: center; 


ge Mh li 


3 
</style></head> 


-clearfloat { 
<body> 3 clear both; 
<div id="container"> S height:0; 
<div id="header"><span class="bigt| j5 font-size: 1px; 
<div id="Leftcolumn"> 6 line-height: Gpx 
<p><img src="images/FromBBC2 . j pg} 
<p class="maintext">This is the 
paragraph. It has words, it has sent 
asked a question?</p> 
</div> <fstyle></head> 


We just defined a CSS style, and now we need to apply it. In this case right 
before the closing tag of our container. 


Go to near the bottom of the code, and put your cursor right before that 
last </div> tag. Hit return a couple of times to make things clearer, and 


type: 
<div class="clearfloat”></div> 


This should look like the code in the illustration below. 


<div id="rightcolumn"> 6 <div id="rightcolumn"> 
<p><img src="images/FromBBC.jpg" wid ? <p><img src="images/FromBBC.jpg" wid 
<p class="maintext">This is another 2 <p class="maintext">This is another 
the same rule applied to it. So it will the same rule applied to it. So it will 
</div> </div> 


Kédiv> 7 | 
<boa> y ? <div class="clearfloat"></div> 


</html> 


</div> 
</body> 
<¢htmL> 
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Go back to Design View, and you should see that the container box now 
stretches below the columns the way it should. 


Try editing your column sizes to different widths. How about a main col- 
umn and a sidebar (edit the style for rightcolumn to make it 500 pixels and 
for the right column to be something like 200 pixels. 


Try adding a background color to your whole page by editing the <body> 
tag. 


Experiment and play around with this stuff. Refer back to the tutorials as 
needed. 


And that’s it. You now have a toolbox for doing very functional websites. 
You can add pages, information, styles, and add photographs. If you add 
photographs, you might want to size them in Photoshop to fit the column 
widths of 350 (or whatever column width(s) you end up with and you 
should save them as JPEGs (or PNG or GIF) files. 
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Lesson 5: 
Epilogue - some useful 
things 


Now that you have a toolbox full of tools, it is time to figure out a little bit more 
about the finer aspects of using these tools. 


Test your pages in different web browsers. Personally, | test in Safari, 
Firefox, Chrome, and Explorer. Remember that little globe at the top of your 
Dreamweaver window that allows you to test in different browsers. You 

can add more browsers by going to the menu File / Preview in Browser / Edit 
Browser list. 


Inevitably, things go wrong. One handy way of tracking down what went 


wrong in layout is to go to the top of the window, click on the eye icon, and 
turn on CSS Layout Backgrounds. 


Hide All Visual Aids 71 


v CSS Layout Backgrounds 
meWebsite/index.html fl, ex.html Z CSS LaySut Box Model 


Inspect @./ Multiscreen Dee Title: The] fọ | Multiscreen | | 


This will show each layout element as a different color. It is useful when you 
get stumped as to why something is not working correctly. 


Live Code | f | Live View | | Inspect Je Multiscreen | K, @ Title: The Home Page 


dress: file:///Pi/Users/beezy/Desktop/MyNameWebsite /index.html D E. 
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Look at your code. One of the things that | am always taking out are para- 
graph tags (<p> and </p>). They screw me up so much that I usually just 
use line breaks between elements (images or paragraphs). You can insert a 
break in design view by hitting shift+return instead of hitting return. 


Often times, especially after a lot of editing in design view, the code gets 
screwed up, so something like a link will extend across another link. HTML 
code uses pretty much plain English, and it is not too hard to correct these 
things by moving the code around a bit. Remember that paragraph returns 
you make in Code View don't effect anything, and you can use them to 
make the code easier to view and sort out. 


But most of all, try different things. By default, Dreamweaver is set up for 50 
undos, and if you would like to preview your files in a browser without hav- 
ing to save them you can turn on this option in the preferences. 


Category Preview in Browser 
General i 


Accessibility 

AP Elements 

Code Coloring 
Code Format 
Code Hints 

Code Rewriting 
Copy/Paste 

CSS Styles 

File Compare 

File Types / Editors 
Fonts 

Highlighting 
Invisible Elements 
New Document 
Preview in Browser 
Site 

Status Bar 
Validator 


+] =] 


Chrome 

Firefox.app Cmd F12 
Internet Explorer.app 
Netscape.app 
OmniWeb.app 
Opera.app 

Safari.app OptF12 


Defaults: m Primary browser 
[_] Secondary browser 


Options: M Preview using temporary file 


Selection this option will create a temporary copy for 
preview and server debugging. To update the 
document directly please uncheck this option.Note 
that deselecting this option does not apply to 
previewing XSLT, which always use a temporary file. 


(Cancel ) (0K) 


Also you can save multiple copies of a file, so that if you make too many 
mistakes you can always fall back on a file you saved before you really 
screwed things up. 
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Look at other people's websites. If you see a rollover effect or something 
else you really like, you can always ‘borrow’ it. All browsers allow you to 
view the source code, and you can copy as much as you need and paste it 
into your file. 


It may be a little hard in this case to see where others keep their CSS style 
definitions, and this leads us to one other thing you should know, which is 
how to keep your CSS styles in a separate place. 


When you make a new style you can either apply it to the document you 
are working on, or you can save it somewhere else (New Style Sheet File). 


Selector Type: 


Choose a contextual selector type for your CSS rule. =e 


Cancel ) 


| ID (applies to only one HTML element) 


Selector Name: 


Choose or enter a name for your selector. 


#container 


This selector name will apply your rule to 
any HTML elements with id “container”. 


Less Specific More Specific 


Rule Definition: 


Choose where your rule will be defined. 


Y (This document only) = 
(New Style Sheet File) 


There is one advantage to saving it somewhere else. If you are using the 
same styles across multiple pages (be it two or two hundred), changing 
one thing will change all the pages. 


So let’s say you make a website, and then a month later decide your link 
colors are bright, your text is a bit too small, and your columns are a bit too 
narrow. If you are using what is called an external style sheet where the 
styles for your entire site are on one page (this is why they are called Cas- 
cading Style Sheets), it is a very simple matter to change the look of these 
things in one place and it will change your entire site. 
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Below is the basic folder structure for the website you got these tutorials 
from. Notice that there are three style sheets that govern the entire site. 
The first | called AdobeAdd, since this is where | make changes to styles that 
Adobe Lightroom produces when | have it automatically make web pages 
of student work. 


The second style sheet is called LayoutStyles, and contains just that. | like to 
keep the layout styles separate from the styles that govern text (TextStyles), 
but making three pages instead of one to govern everything is purely 
personal preference. It would work just as well to have all the styles in one 
style sheet. 


E _notes E _notes 

| Learn Originals Etc E 108_GraphicDesign D AdobeAdd.css 
E 205_ComDes ©) LayoutStyles.css 
E 206_ComputerArt Y) TextStyles.css 
E 208_Photography B xbackups 
{J 209_Photographyll 
E 210_ComDes2 


E 250_ArtHistoryl 
(@ 251_ArtHistoryll 
E 310_AdvDesProjs 
{J 460_Seminar 

E colophon 

(0 images 


2) index.html 


5 items, 140.07 GB available 


Each page you use a style in must be linked to the stylesheet. Here is the 
code for the home page (index) of the above website. | got to it in Safari by 
just going to the menu View / View Source. You can see (highlighted) the 
part of the page that tells the web browser where to find my CSS styles, in 
this case in the folder named css. 


<link href="css/LayoutStyles.css" rel="stylesheet" type="text/css" /> 


<link href="css/TextStyles.css" rel="stylesheet" type="text/css" /> 
</head> 
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Since you can see where the styles are, you can enter this information in 
Safari’s address box (in this case | cut index.htm! and added css/TextStyles. 
css). Since Safari sees that it is not a regular web page, it displays the code 
as text. 


In the example below you can see that my links on this site have something 
fancy going on. This is a transition effect that changes the background 
color of my links gradually as you roll over them (it is a very quick, so it is 
not very noticeable). 


If you wanted a similar effect to your links, you could highlight the text and 
paste it into your CSS style. 


http://faculty.wartburg.edu/ payne 


bale JS 


@charset "UTF-8"; 
/* CSS Document */ 


a { 
text-decoration: none; 
text-transform: uppercase; 


} 


text-decoration: none; 

color: #ddd; 

padding: 3px Opx 2px Opx; 
background-color: inherit; 
-webkit-transition: background 0.2s ease; 
-moz-transition: background 0.2s ease; 
-o-transition: background 0.2s ease; 
transition: background 0.2s ease; 


} 


a:visited { 
color: 


Even just doing the techniques we covered in these tutorial, you will need 
additional information. If you use Dreamweaver Help (in the help menu), 
you might want to go to Search Options and turn on Local for the search 
location. If you do not do this, you will get info from (as far as | can tell) all 
over the place and in no coherent manner. And it will display slowly. Not 
good for just quickly looking up something. 
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Appendix 


Here are a few things that are somewhat difficult to remember, so they are ina 
handy place for quick reference. 


CSS Type 


Class - Usually used for type formatting. Can also be used for layout if you 
want the same layout box to appear multiple times on a page. These show 
up in the CSS Style Panel and code with a period before the name (.body- 
text). 


ID - Usually used for layout. Can be used across multiple pages with the 
same layout or even pages with different layouts (although you wouldn't 
probably want to do this. These show up in the CSS Style Panel and code 
with a pound sign before the name (#centercolumn). 


Tag - HTML has built-in formatting tags for things like bold type, headers 
(bigger type), and so on. This redefines these tags to appear differently 
than the built-in appearances. These show up in the CSS Style Panel and 
code as aname with no prefix symbol (body). Instead of naming these 
yourself, you should pick from the list of available tags when selecting. 


Choose Class (can apply to any HTML element) ( Cancel ) 
vY ID (applies to only one HTML element) 


Tag (redefines an HTML element) 
Compound (based on your selection) 


Selector 


Choose or enter a name for your selector. 
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Box Catagory for CSS layout 


Width and Height -Width is used more than height, since an unspecified 
height will allow you to keep adding elements (pages scroll vertically!). 


Float - if you don’t want your layout box to have a set dimension from the 
edge of the container (or whatever contains it), turn on float. This is used 
quite a bit. 


Clear - If you don't want to have anything after your box to the right of it, 
but instead have it go down below it, specify this. This is not needed much 
of the time. 

Padding - This is the margin within a box. 

Margin - This is the margin outside a box. 

Both margin and padding increase the size of a box (e.g. two 100 pixel 
wide boxes will not fit into a 200 pixel wide box if there is any margin or 


padding). 


Remember the help system — in this dialogue box (as in others), there is a help 
button which will take you to actual definitions. 


CSS Rule definition for #leftcolumn 


Category 


Type 


Back: d Å 
jock wath: [ A E Foa 2) 
Height: [x ¢) Cear: ic) 


POSEDO Padding Margin 
M Same for all m Same for all 


Top: cs) px < Top: & px 


Extensions 
Right: 


Bottom: +j px : È : px 


Left: $ px $ 4 $ px 


( ) ( \¢ X 
Help Apply )( Cancel ) (0K) 
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Photoshop File types (Save for Web) 


GIF - Good for type (like titles and other things you don’t want to use the 
browser fonts for) and other things with few colors. Can also save anima- 
tions. Do not use for photographs. 


JPEG - Best for photographs. If a color profile is saved, make sure it is sRGB. 


PNG-24 - PNG files basically replace G/F and JPEG, but with little advan- 
tage. The one exception to this is when you need something with a trans- 
parent background, such as type (like a title) or a logo over a solid color 
background. In Photoshop, make a layer over a transparent layer and save 
as PNG-24. 


One can also copy type from Illustrator, paste it into Photoshop (it will 
come in as a smart object), and go back and forth between the applications 
to tweak and edit the type. Very cool. 


C Embed Color Profile 


© Convert to sRGB 
Preview: | Internet Standard RGB (No Color Ma... [it 
Metadata: (None) 


~ Color Table m "E = 


) [aa 
— Image Size 
W: 304 px Je Percent: 100 % 
m 228 ox 19 ua 


Gm E = es —— 
2 Looping Options: { Forever 


gö ox Wò r~- c= e~ [ Alpha He index: — VIL 1of1 paja] 


(Device Central...) (Preview...) | @ A) a (Cancel) (Done) 
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